Resolve the conflict of rendering markers {{}} of double curly braces between vue and node template engines

  • 2021-08-16 22:56:35
  • OfStack

As a result of previous practice koa2, direct rendering of jquery is written on the traditional page.

This time, I want to be lazy. I directly introduced script into vue, and found that I couldn't render data value.

The rendering engine uses xtpl. After searching for half a day, I didn't find that I can modify the configuration of xtpl rendering separator

vue has!


 var myVue = new Vue({
  el: '#msgBoard',
  delimiters:['$$','$$'],
  data() {
  return {
   msg: {
   num: 10
   }
  }
  },
  mounted() {
  console.dir(this)
  },
 })

Additional knowledge: Front End--Template Renderer {{}} Conflict Resolution for vue and nunjucks

Because the rendering technology of nunjucks is used on thinkjs, when we know vue, we find that vue also uses {{}} to identify template codes.

I found an vue html code and put it on thinkjs to run, and found that the data could not be bound. Then go online and find the following solutions:

Modify the identifier for vue by adding {% raw%}, {% endraw%}, as follows:

{% raw %}{{result.name}}{% endraw %}

Problem solving.


Related articles: